<template>
  <!-- mb:margin-bottom -->
  <el-card
    shadow="hover"
    v-for="(note, index) in noteli"
    :key="note.noteId"
    class="mb-2"
  >
    <el-row>
      <el-col :span="24" class="fs-3"
        ><el-link type="primary">
          <router-link :to="{ path: '/detail/' + note.noteId }" class="fs-3">
            {{ note.noteName }}
          </router-link></el-link
        ></el-col
      >
    </el-row>

    <el-row class="mt-2">
      <el-col :span="3">
        <img class="w-100" :src="note.headUrl" />
      </el-col>
      <el-col :span="21" class="ps-2">{{ note.noteIntro }}</el-col>
    </el-row>

    <el-row class="mt-2">
      <el-col :span="3">{{ note.aythorname }}</el-col>
      <el-col :span="6">{{ note.publishTime }}</el-col>
      <el-col :span="4" :offset="1"
        ><el-icon class="h-100" @click="LikeAction(note.noteId, index)"
          ><Star
        /></el-icon>
        {{ note.likeNum }}</el-col
      >
      <el-col :span="4"
        ><el-icon class="h-100"><ChatDotSquare /></el-icon
        >{{ note.commentNum }}</el-col
      >
      <el-col :span="4"
        ><el-icon class="h-100"><View /></el-icon>{{ note.viewNum }}</el-col
      >
    </el-row>
  </el-card>
</template>

<script>
import { Star, View, ChatDotSquare } from "@element-plus/icons-vue";

export default {
  name: "PostBar",
  components: {
    Star,
    View,
    ChatDotSquare,
  },
  //传参数
  props: {
    noteName: String,
  },

  data() {
    //声明当前页面要使用的变量
    return {
      noteli: [], //展示笔记列表
    };
  },
  mounted() {
    //vue声明周期一部分，会在页面渲染完毕后执行
    this.getNoteli();
  },
  //监听noteName的值
  watch: {
    noteName() {
      console.log(this.noteName);
      this.getNoteli();
    },
    noteId() {
      console.log(this.noteId);
      this.getlikeNum();
    },
  },
};
</script>

<style>
</style>